<template>
    <div>
        <div class="row top-row">
            <div class="col-md-12" >
                <div class="input-model" >
                    <select class="form-control"  placeholder="年龄高低"  v-model="user.usertype">
                        <option value="" selected>年龄高低</option>
                        <option value="">积分高低</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row body-row">
            <div class="item-list">
                <div class="item-title">
                    <div class="item-title-left">
                        张海莉
                    </div>
                    <div class="item-title-right">
                        1993-02-28
                    </div>
                </div>
                <div class="item-body">
                    <div class="item-body-left">
                        支部书记
                    </div>
                    <div class="item-body-right">
                        +300
                    </div>
                </div>
                <div class="item-bottom">
                    <div class="item-bottom-left">
                        女&nbsp研究生硕士
                    </div>
                    <div class="item-bottom-right">
                        5级
                    </div>
                </div>
            </div>
            <div class="item-list">
                <div class="item-title">
                    <div class="item-title-left">
                        赵婷
                    </div>
                    <div class="item-title-right">
                        1993-02-28
                    </div>
                </div>
                <div class="item-body">
                    <div class="item-body-left">
                        支部书记
                    </div>
                    <div class="item-body-right">
                        +300
                    </div>
                </div>
                <div class="item-bottom">
                    <div class="item-bottom-left">
                        女&nbsp研究生硕士
                    </div>
                    <div class="item-bottom-right">
                        5级
                    </div>
                </div>
            </div>
            <div class="item-list">
                <div class="item-title">
                    <div class="item-title-left">
                        刘杰
                    </div>
                    <div class="item-title-right">
                        1993-02-28
                    </div>
                </div>
                <div class="item-body">
                    <div class="item-body-left">
                        支部书记
                    </div>
                    <div class="item-body-right">
                        +300
                    </div>
                </div>
                <div class="item-bottom">
                    <div class="item-bottom-left">
                        男&nbsp研究生硕士
                    </div>
                    <div class="item-bottom-right">
                        1级
                    </div>
                </div>
            </div>
            <div class="item-list">
                <div class="item-title">
                    <div class="item-title-left">
                        魔卡
                    </div>
                    <div class="item-title-right">
                        1993-02-28
                    </div>
                </div>
                <div class="item-body">
                    <div class="item-body-left">
                        支部书记
                    </div>
                    <div class="item-body-right">
                        +100
                    </div>
                </div>
                <div class="item-bottom">
                    <div class="item-bottom-left">
                        女&nbsp研究生硕士
                    </div>
                    <div class="item-bottom-right">
                        6级
                    </div>
                </div>
            </div>
            <div class="loading">
                更多
            </div>
        </div>
        <appfooter></appfooter>
    </div>
</template>
<script>
    import Vue from 'vue';
    import appheader from '../components/appheader';
    import appfooter from '../components/appfooter'
    export default {
        data () {
            return {
                user:{
                    usertype:"",
                    order:""
                }
            }
        },
        methods: {

        },
        mounted () {
        },
        components: {
            'appheader':appheader,
            'appfooter':appfooter

        }
    }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    select {
        /*美化样式*/
        display: block;
        width: 100%;
        color: #9a773e;
        border: none;
        /*Chrome和Firefox里面的边框是不一样的，
        所以复写了一下*/
        /*很关键：将默认的select选择框样式清除*/
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
        /*为下拉小箭头留出一点位置，避免被文字覆盖*/
        background:url("../assets/images/select2.png")  no-repeat scroll 95% 55% #F0F0F0;
        background-color: transparent;
    }
    /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
    select::-ms-expand {
        display: none;
    }
    .loading{
        color: #e9b150;
        font-size: 14px;
        text-align: center;
        width: 100%;
        margin-top: 10px;

    }
    select option{
        background-color: #242528;
    }
    .col-md-12{
        width: 100%;
    }
    .select-default{
        select{
            background:url("../assets/images/select3.png")  no-repeat scroll 95% 55% #F0F0F0;
            background-color: transparent;
            padding-left: 56px;
        }
        .select-model{
            width: 140px;
            float: right;
            margin-right: 14px;
        }
    }
    .input-model{
        border-radius: 20px;
        border: #9a773e 1.4px solid;
        width:100%;
        box-shadow: 1px 0px 0px #9A773E, 3px 2px 1px #333333;
        input{
            background-color: transparent;
            border-radius: 20px;
            border:none;
            padding: 5px;
            color: #F0F0F0 !important;
            font-size: 14px !important;

        }
    }
    .form-control {
        display: block;
        font-size: 14px;
        line-height: 14px;
        width: 100%;
        font-weight: 500;
        font-family: fantasy;
        padding-left: 26px;
        height: 25px;
    }
    .top-row{
        margin-left: 36px;
        margin-top:16px;
        margin-right: 36px;
    }
    .body-row{
        margin-top: 10px;
    }

    .item-list{
        margin-left: 10px;
        margin-top: 14px;
        width: 100%;
        padding-right: 14px;
        padding-left: 7px;
        padding-top: 7px;
        padding-bottom: 7px;
        background-color: #524838;
        margin-right: 14px;
        opacity: 0.7;
        .item-title{
            display: flex;
            flex-direction: row;
            font-size: 13px;
            .item-title-left{
                width: 70%;
                margin-top: 4px;
                overflow:hidden;
                text-overflow:ellipsis;
            }
            .item-title-right{
                width: 30%;
                overflow:hidden;
                text-overflow:ellipsis;
                text-align: right;
            }
        }
        .item-body{
            display: flex;
            flex-direction: row;
            font-size: 13px;
        }
        .item-bottom{
            display: flex;
            flex-direction: row;
            margin-top: 4px;
            font-size: 12px;
            .item-bottom-left{
                width: 70%;
                overflow:hidden;
                text-overflow:ellipsis;
            }
            .item-bottom-right{
                width: 30%;
                overflow:hidden;
                text-overflow:ellipsis;
                text-align: right;
            }
        }
        .item-body-left{
            width: 70%;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .item-body-right{
            text-overflow:ellipsis;
            overflow:hidden;
            color: #ffce79;
            width: 30%;
            text-align: right;
        }
    }
</style>